import React, { useMemo } from 'react'
import { observer, FormProvider, createSchemaField } from '@formily/react'
import {
  FormItem,
  Input,
  Radio,
  Switch,
  Select,
  NumberPicker,
} from '@formily/antd'
import { ValueInput } from '@designable/react-settings-form'
import { createForm, onFieldChange } from '@formily/core'
import { ExpressionDialogSetter } from '../ExpressionDialogSetter'

export interface IRowSelectionSetterProps {
  value?: any
  onChange?: (value: any) => void
}

const SchemaField = createSchemaField({
  components: {
    Input,
    FormItem,
    Radio,
    Switch,
    Select,
    ValueInput,
    NumberPicker,
    ExpressionDialogSetter,
  },
})

export const RowSelectionSetter: React.FC<IRowSelectionSetterProps> = observer(
  (props) => {
    const form = useMemo(
      () =>
        createForm({
          initialValues: props.value,
          effects: (form) => {
            onFieldChange('*', () => {
              props.onChange?.(form.getState().values)
            })
          },
        }),
      []
    )

    return (
      <FormProvider form={form}>
        <SchemaField>
          <SchemaField.Boolean
            name="enabled"
            x-decorator="FormItem"
            x-decorator-props={{
              label: '开启列选择',
              tooltip: '是否开启表格行选择功能',
            }}
            x-component="Switch"
          />

          <SchemaField.String
            name="type"
            x-decorator="FormItem"
            x-decorator-props={{
              label: '选择类型',
            }}
            x-component="Radio.Group"
            x-component-props={{
              optionType: 'button',
              options: [
                { label: '多选', value: 'checkbox' },
                { label: '单选', value: 'radio' },
              ],
              defaultValue: 'checkbox',
            }}
            x-reactions={{
              dependencies: ['.enabled'],
              fulfill: {
                state: {
                  visible: '{{$deps[0] === true}}',
                },
              },
            }}
          />

          <SchemaField.Boolean
            name="fixed"
            x-decorator="FormItem"
            x-decorator-props={{
              label: '固定选择列',
            }}
            x-component="Switch"
            x-reactions={{
              dependencies: ['.enabled'],
              fulfill: {
                state: {
                  visible: '{{$deps[0] === true}}',
                },
              },
            }}
          />

          <SchemaField.String
            name="columnWidth"
            x-decorator="FormItem"
            x-decorator-props={{
              label: '选择列宽度',
            }}
            x-component="NumberPicker"
            x-component-props={{
              addonAfter: 'px',
              min: 50,
              max: 200,
              defaultValue: 60,
            }}
            x-reactions={{
              dependencies: ['.enabled'],
              fulfill: {
                state: {
                  visible: '{{$deps[0] === true}}',
                },
              },
            }}
          />

          <SchemaField.String
            name="columnTitle"
            x-decorator="FormItem"
            x-decorator-props={{
              label: '选择列标题',
            }}
            x-component="Input"
            x-component-props={{
              placeholder: '默认为空',
            }}
            x-reactions={{
              dependencies: ['.enabled'],
              fulfill: {
                state: {
                  visible: '{{$deps[0] === true}}',
                },
              },
            }}
          />

          <SchemaField.Boolean
            name="preserveSelectedRowKeys"
            x-decorator="FormItem"
            x-decorator-props={{
              label: '保留选中项',
              tooltip: '当数据被删除时仍然保留选项的 key',
            }}
            x-component="Switch"
            x-reactions={{
              dependencies: ['.enabled'],
              fulfill: {
                state: {
                  visible: '{{$deps[0] === true}}',
                },
              },
            }}
          />

          <SchemaField.Boolean
            name="hideSelectAll"
            x-decorator="FormItem"
            x-decorator-props={{
              label: '隐藏全选',
              tooltip: '隐藏表头全选勾选框',
            }}
            x-component="Switch"
            x-reactions={{
              dependencies: ['.enabled'],
              fulfill: {
                state: {
                  visible: '{{$deps[0] === true}}',
                },
              },
            }}
          />

          <SchemaField.Boolean
            name="checkStrictly"
            x-decorator="FormItem"
            x-decorator-props={{
              label: '严格模式',
              tooltip: '父子节点选中状态不再关联',
            }}
            x-component="Switch"
            x-reactions={{
              dependencies: ['.enabled'],
              fulfill: {
                state: {
                  visible: '{{$deps[0] === true}}',
                },
              },
            }}
          />

          <SchemaField.String
            name="selectedRowKeys"
            x-decorator="FormItem"
            x-decorator-props={{
              label: '默认选中项',
              tooltip: '指定默认选中的行，需要和 rowKey 对应',
            }}
            x-component="ExpressionDialogSetter"
            x-reactions={{
              dependencies: ['.enabled'],
              fulfill: {
                state: {
                  visible: '{{$deps[0] === true}}',
                },
              },
            }}
          />

          <SchemaField.String
            name="onChange"
            x-decorator="FormItem"
            x-decorator-props={{
              label: '选择变化回调',
              tooltip: '选中项发生变化时的回调函数',
            }}
            x-component="ExpressionDialogSetter"
            x-reactions={{
              dependencies: ['.enabled'],
              fulfill: {
                state: {
                  visible: '{{$deps[0] === true}}',
                },
              },
            }}
          />

          <SchemaField.String
            name="onSelect"
            x-decorator="FormItem"
            x-decorator-props={{
              label: '选择行回调',
              tooltip: '用户手动选择/取消选择某行的回调',
            }}
            x-component="ExpressionDialogSetter"
            x-reactions={{
              dependencies: ['.enabled'],
              fulfill: {
                state: {
                  visible: '{{$deps[0] === true}}',
                },
              },
            }}
          />

          <SchemaField.String
            name="onSelectAll"
            x-decorator="FormItem"
            x-decorator-props={{
              label: '全选回调',
              tooltip: '用户手动选择/取消选择所有行的回调',
            }}
            x-component="ExpressionDialogSetter"
            x-reactions={{
              dependencies: ['.enabled'],
              fulfill: {
                state: {
                  visible: '{{$deps[0] === true}}',
                },
              },
            }}
          />

          <SchemaField.String
            name="onSelectInvert"
            x-decorator="FormItem"
            x-decorator-props={{
              label: '反选回调',
              tooltip: '用户手动选择反选的回调',
            }}
            x-component="ExpressionDialogSetter"
            x-reactions={{
              dependencies: ['.enabled'],
              fulfill: {
                state: {
                  visible: '{{$deps[0] === true}}',
                },
              },
            }}
          />

          <SchemaField.String
            name="onSelectNone"
            x-decorator="FormItem"
            x-decorator-props={{
              label: '清空选择回调',
              tooltip: '用户清空选择的回调',
            }}
            x-component="ExpressionDialogSetter"
            x-reactions={{
              dependencies: ['.enabled'],
              fulfill: {
                state: {
                  visible: '{{$deps[0] === true}}',
                },
              },
            }}
          />

          <SchemaField.String
            name="getCheckboxProps"
            x-decorator="FormItem"
            x-decorator-props={{
              label: '选择框属性',
              tooltip: '选择框的默认属性配置函数',
            }}
            x-component="ExpressionDialogSetter"
            x-reactions={{
              dependencies: ['.enabled'],
              fulfill: {
                state: {
                  visible: '{{$deps[0] === true}}',
                },
              },
            }}
          />

          <SchemaField.String
            name="renderCell"
            x-decorator="FormItem"
            x-decorator-props={{
              label: '自定义渲染',
              tooltip: '自定义渲染勾选框，用法与 Column 的 render 相同',
            }}
            x-component="ExpressionDialogSetter"
            x-reactions={{
              dependencies: ['.enabled'],
              fulfill: {
                state: {
                  visible: '{{$deps[0] === true}}',
                },
              },
            }}
          />
        </SchemaField>
      </FormProvider>
    )
  }
)
